<script setup lang='ts'>
import { getUserDetail, setFollow } from '@/api/user';
import { userStatusEnum } from '@/constants/user';
import { showFailToast } from 'vant/es';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter()
const route = useRoute()
const id = route.query.id
const user = ref()
const getUserInfo = async () => {
  const res = await getUserDetail(id)
  if(res.data.code === 0){
    user.value = res.data.data
    user.value.tags = JSON.parse(user.value.tags)
  }
}
// 关注
const follow = async () => {
  const res = await setFollow(user.value.id)
  if(res.data.code===0){
    getUserInfo()
  }else{
    showFailToast('关注失败'+res.data.description)
  }
}

const toChat = () => {
  router.push({
    path: '/chat',
    query: {
      id: user.value.id,
      username: user.value.username,
      userType: 1
    }
  })
}


onMounted(() => getUserInfo())

</script>
<template>
  <div v-if="user">
    <div class="header">
      <van-row>
        <van-col span="8">
          <van-image
            round
            width="88"
            height="88"
            fit="cover"
            :src="user.avatarUrl"
          />
        </van-col>
        <van-col span="16">
          <van-space direction="vertical" fill>
            <h3 style="margin: 2px 0;">{{ user.username }}</h3>
            <p class="userAccount">桃友账号：{{ user.userAccount }}</p>
          </van-space>
        </van-col>
      </van-row>
    </div>
    <van-cell-group>
      <van-cell title="简介" :label="user.profile?? '这个家伙很懒，还没有写简介'" />
      <van-cell title="标签">
        <template #value>
          <van-tag v-if="user.tags?.length>0" color="#008811" style="margin: 0 2px;" v-for="item in user.tags" plain type="primary">{{ item }}</van-tag>
          <span v-else>该用户不被定义</span>
        </template>
      </van-cell>
      <van-cell title="性别" :value="userStatusEnum[user.gender]?? '该用户还未填写性别'"/>
      <van-cell title="邮箱" :value="user.email?? '该用户还未填写邮箱'"/>
      <van-cell title="注册时间" :value="user.createTime"/>
      <div style="margin: 10px 16px;">
        <van-button @click="follow()" v-if="user.isFollow" plain round type="primary" block>关注</van-button>
        <van-button @click="follow()" v-else plain round  block color="#c1c1c1">已关注</van-button>
        <van-button @click="toChat" plain round type="primary" block style="margin-top: 10px;">发消息</van-button>
      </div>
    </van-cell-group>
  </div>
</template>
<style scoped >
*{
  margin: 0;
  padding: 0;
}
.userAccount{
  color: #a7a4a4;
}
.van-cell{
  padding: 10px 16px;
}
.header{
  margin: 16px;
}

</style>
